<template>
  <div class="order_catchpdd">
   <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：生产管理>抓单管理>拼多多抓单</div>
    <div style="height: 16px; width: 100%; background: #F9F9F9;"></div>

    <div class="team">
      <div class="powertop">
        <router-link class="powertopli" to="/order_catch/order_catchjd">京东抓单</router-link>
        <router-link class="powertopli powertopact" to="/order_catch/order_catchpdd">拼多多抓单</router-link>
        <router-link class="powertopli" to="/order_catch/order_catchyz">有赞抓单</router-link>
        <router-link class="powertopli" to="/order_catch/order_catchtm">天猫抓单</router-link>
        <router-link class="powertopli" to="/order_catch/order_kuaishou">快手抓单</router-link>
        <router-link class="powertopli" to="/order_catch/order_douyin">抖音抓单</router-link>
      </div>
      <div class="centerall">
        <div class="t-img">
          <img src="../../../static/img/catchyz.png">
          <!-- <span class="t-48" @click="mlog48 = true">48小时自动发货</span> -->
          <span class="t-email" @click="mobileshow">设置短信报警</span>
        </div>
        <div style="display: flex; margin-bottom: 20px;">
          <div
            style="border-bottom: 3px #ff0000 solid; width: 100px; cursor: pointer; font-size: 16px; margin-right: 20px; padding: 20px 0; text-align: center;">
            旧版抓单</div>
          <div @click="goxin"
            style="border-bottom: 3px #FFFFFF solid; width: 180px; cursor: pointer;  font-size: 16px; padding: 20px 0; text-align: center;">
            新版抓单（自研应用）</div>
        </div>
        <div class="t-con" v-loading="loading">
          <div class="list" style="margin-bottom: 10px; border-left: 1px #EAEAEA solid;">
            <div class="th">店铺名称</div>
            <div class="th">cookie状态</div>
            <div class="th">操作</div>
          </div>
          <div class="list" v-for="item in list" :key="item.id" style=" border-left: 1px #EAEAEA solid;">
            <div class="td td2">{{item.shop_name}}</div>
            <div class="td td2">
              {{item.stat}}
              <div class="cookiechange" @click="showlog(item.id)"><i class="el-icon-edit" style="color: #409eff;"></i>
              </div>

              <!-- <div class="cookiechange" v-if="shopid == 50481 || shopid == 304676" @click="showlog2(item.id)" style="margin-left: 20px;">订单解密<i class="el-icon-edit" style="color: #409eff;"></i></div> -->
            </div>
            <div class="td td2">
              <!-- <el-button type="primary" size="mini" v-if="item.is_run == 0 && item.is_login != 2" @click="showlog(item.id)">开始抓单</el-button>

                	        <el-button type="primary" size="mini" v-if="item.is_run == 1" plain @click="showlog(item.id)">抓单中</el-button>
                	        <el-button type="primary" size="mini" v-if="item.is_run == 1" plain @click="stop(item.id)">暂停抓单</el-button>

                          <span style="margin-right: 10px;" v-if="item.cookie != '' && item.is_run == 0 && item.is_login == 2">抓单已暂停</span>
                          <el-button type="primary" size="mini" v-if="item.cookie != ''  && item.is_run == 0 && item.is_login == 2" plain @click="showlog(item.id)">继续抓单</el-button>
                          <el-button type="primary" size="mini" @click="loudanchoose(item.id)">漏单补抓</el-button> -->
              <span style="margin-right: 10px;" v-if="item.is_run == 1 && item.is_login == 1">抓单已开启</span>
              <el-button v-if="item.is_run == 0 && item.is_login != 1" type="primary" size="mini"
                @click="gocatch(item.id)">开启抓单</el-button>
              <!-- <el-button v-if="item.is_run == 1 && item.is_login == 1" type="danger" size="mini" @click="stop(item.id)">停止抓单</el-button> -->
              <el-button type="primary" plain size="mini" @click="loudanchoose(item.id)">漏单补抓</el-button>
              <el-button type="text" size="mini" @click="seelogs(item.id,item.shop_name)">查看抓单失败记录</el-button>
              <el-button type="danger" plain size="mini" @click="shanchu(item.id)">删除</el-button>
            </div>
          </div>
          <div class="addshop">
            <el-button type="primary" size="mini" @click="addshplog = true"><i class="el-icon-plus"></i>申请添加店铺
            </el-button>
          </div>
          <div class="getcookie">
            <div style="color: #ff253f;">cookie说明：cookie只影响备注同步，不影响抓单和发货，请保持可用状态</div>
            <h3>拼多多添加店铺抓单流程:</h3>
            <!--                        <div>1、登录拼多多店铺商家后台</div>
                        <div>3、按下F12（或者在设置菜单）中进入开发者模式，点击右上角开发者模式的“network”（部分浏览器在底部显示）。</div>
                        <div>3、按下F5刷新页面在右侧的name框中选择第一个文件，在右侧的headers中找到cookie。</div>
                        <div v-if="!hide"><el-button @click="hide = true" type="primary" size="mini">展开查看详细教程<i class="el-icon-caret-bottom"></i></el-button></div>
                        <div v-if="hide"><el-button @click="hide = false" type="primary" size="mini">展开查看详细教程<i class="el-icon-caret-top"></i></el-button></div>
                        <div v-if="hide">
                            <div><img src="../../../static/img/pdd1.png" /></div>
                            <div>4、粘贴内容到cookie框</div>
                        </div> -->
            <div class="getflex">

              <div class="getflexli">
                <div class="getflexlix">1</div>
              </div>
              <div class="getxian"></div>
              <div class="getflexli">
                <div class="getflexlix">2</div>
              </div>
              <div class="getxian"></div>
              <div class="getflexli">
                <div class="getflexlix">3</div>
              </div>
            </div>
            <div class="getflex2">
              <div class="getflexli2">
                <div class="getflexli2title">服务市场授权万里牛</div>
                <div class="getflexli2content blue">
                  <router-link to="/order_catch/order_catchpddsq">点击进入详细步骤操作</router-link>
                </div>
              </div>
              <div class="getflexli2">
                <div class="getflexli2title">添加店铺</div>
                <div class="getflexli2content">点击上方的“申请添加店铺”按钮</div>
                <div class="getflexli2content">填写店铺名称和店铺ID</div>
              </div>
              <div class="getflexli2">
                <div class="getflexli2title">开始抓单</div>
                <div class="getflexli2content">添加店铺后点击开始抓单</div>
                <div class="getflexli2content">在弹出的窗口输入cookie信息即可抓单</div>
                <div class="getflexli2content blue">
                  <router-link to="/order_catch/order_catchpddcook">点击了解如何获取cookie</router-link>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <el-dialog title="cookie登录" :visible.sync="log" :close-on-click-modal="false" width="600px">
      <div>
        <el-input type="textarea" placeholder="请输入cookie" v-model="cookies" rows="15"></el-input>
        <!-- :picker-options="timerule" -->

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取 消</el-button>
        <el-button type="primary" @click="gocookie">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="解密录入" :visible.sync="log2" :close-on-click-modal="false" width="600px">
      <div>
        <el-input type="textarea" placeholder="请输入cookies" v-model="cookies2" rows="8" style="margin-bottom: 20px;">
        </el-input>
        <el-input type="textarea" placeholder="请输入anti-content" v-model="cookies3" rows="8"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log2 = false">取 消</el-button>
        <el-button type="primary" @click="gocookie2">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="手机号设置" :visible.sync="mlog" :close-on-click-modal="false" width="600px">
      <div>
        <el-input v-model="mobile" placeholder="请输入手机号"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mlog = false">取 消</el-button>
        <el-button type="primary" @click="gomobile">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="48小时自动发货" :visible.sync="mlog48" :close-on-click-modal="false" width="600px">
      <div style="text-align:center;">
        <el-radio v-model="radio" label="1">开启</el-radio>
        <el-radio v-model="radio" label="0">关闭</el-radio>
      </div>
      <div class="says48">
        <div>说明：开启该功能后拼多多订单会在要求的48小时之前的8个小时，在拼多多平台以无需物流的方式自动发货，在您导入正常发货的运单号数据后，
          系统会前往拼多多覆盖原发货信息（自发货后的24小时内可覆盖）。</div>
        <div style="color:#f00">注：该功能仅支持抓单的数据发货，未设置抓单或未登陆，功能无效</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mlog48 = false">取 消</el-button>
        <el-button type="primary" @click="go48">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="申请添加店铺" :visible.sync="addshplog" :close-on-click-modal="false" width="600px">
      <div style="margin-bottom: 20px;">
        <el-input v-model="addshopname" placeholder="请输入店铺名"></el-input>
      </div>

      <!--            <div>
                <el-input v-model="addshoptoken" placeholder="请输入AccssToken"></el-input>
            </div> -->
      <div style="margin-top:20px; color:#999;">
        注：成功提交后我们将在工作日内48小时配置好，届时可操作抓单。
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addshaopf">提交申请</el-button>
      </span>
    </el-dialog>
    <el-dialog title="漏单补抓" :visible.sync="loudanlog" :close-on-click-modal="false" @close="clearText" width="600px">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="指定单号补抓" name="first">
          <div style="color: #ff253f;">注：请直接从EXCEL复制粘贴，一行一个单号。</div>
          <el-input type="textarea" :rows="10" placeholder="请直接从EXCEL复制粘贴，一行一个单号。" v-model="loudannum"></el-input>
        </el-tab-pane>
        <el-tab-pane label="指定时间段补抓" name="second">
          <div style="margin-top: 20px;">抓单开始时间：<el-date-picker v-model="time" :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" placeholder="选择日期时间"></el-date-picker>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div style="margin-top: 20px;">提醒：重新补抓会消耗您店铺的订单解密额度，请确保解密额度充足。<a
          href="https://fuwu.pinduoduo.com/service-market/decrypt" target="_blank">查看解密额度</a></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="loudanlog = false">取 消</el-button>
        <el-button type="primary" @click="loudan">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
  import axios from 'axios'
  export default {
    name: "order_catchpdd",
    data() {
      return {
        loudanlog: false,
        loudannum: "",
        chooseid: "",
        loading: true,
        list: "",
        hide: false,
        log: false,
        cookies: "",
        cookies2: "",
        cookies3: "",
        mobile: "",
        mlog: false,
        addshplog: false,
        addshopname: "",
        addshoptoken: "",
        id: "",
        time: "",
        // timerule:{
        //     disabledDate(time) {
        //         var time1 = Date.now() - 3600 * 1000 * 24 * 4
        //         return time.getTime() < time1
        //     },
        // },
        radio: "0",
        mlog48: false,
        log2: false,
        shopid: "",
        activeName: "first",
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;
          }
        }
      }
    },
    created() {
      this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      this.getlist();
    },
    mounted() {

    },
    methods: {
      
      shanchu: function(id) {

        this.$confirm('删除店铺会使已有订单失去订单来源，请慎重删除', '重要', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          axios.post('/api/plan-market/out-store/delete', {
              id: id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })

      },
      goxin: function() {
        this.$router.push({
          path: "/order_catch/order_catchpdd2"
        });
      },
      clearText() {
        this.loudannum = ''
      },
      //开启抓单
      gocatch(id) {
        this.id = id
        axios.post('/api/plan-market/out-store/updaterun', {
            id: this.id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.loading = true
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      // seelogs(id){
      //   this.$router.push({
      //     path: "/order_catch/order_catchpddlogs",
      //     query: { id: id }
      //   });
      // },
      seelogs(id, name) {
        this.$router.push({
          path: "/order_catch/order_catchjdlogs",
          query: {
            id: id,
            name: encodeURIComponent(name)
          }
        });
      },
      loudanchoose: function(e) {
        this.chooseid = e
        this.loudanlog = true
      },
      loudan: function() {
        var that = this

        //   var list = [this.loudannum]
        //   if(this.loudannum.indexOf('，') > -1){
        //       list = this.loudannum.split('，')
        //   }
        //   if(this.loudannum.indexOf(',') > -1){
        //       list = this.loudannum.split(',')
        //   }

        let duoxuanids2
        duoxuanids2 = this.loudannum.split(/\n/)
        for (let i in this.duoxuanids2) {
          duoxuanids2[i] = duoxuanids2[i].trim()
        }
        let data = {}
        data.id = this.chooseid
        if (this.activeName == 'first') {
          data.orders = duoxuanids2
          data.tag = 1
        } else {
          data.start_time = this.time[0]
          data.end_time = this.time[1]
          data.tag = 2
        }

        axios.post('/api/plan-market/out-store/order/refetch', data)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.$message({
                message: '抓单已提交，请稍后查看。',
                type: 'success'
              });
              that.clearText()
              that.loudanlog = false
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //申请店铺
      addshaopf: function() {
        this.addshopname = this.addshopname.trim()
        this.addshoptoken = this.addshoptoken.trim()
        // if(!this.addshopname || !this.addshoptoken){
        //   this.$message.error('请填写店铺名和AccssToken')
        //   return
        // }
        var that = this
        axios.post('/api/plan-market/out-store/add', {
            name: this.addshopname,
            source: "pdd",
            access_token: this.addshoptoken
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              that.$message({
                message: '申请已发送，我们将在48小时内处理。',
                type: 'success'
              });
              that.addshplog = false
              that.addshopname = ""
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //48小时发货确认
      go48: function() {
        var that = this
        axios.post('/api/plan-market/out-store/auto_deliver', {
            auto_deliver: that.radio
          })
          .then(response => {
            if (response.data.msg.code == 0) {

              if (that.radio == '0') {
                that.$message({
                  message: '自动发货关闭！',
                  type: 'success'
                });
              } else {
                that.$message({
                  message: '自动发货开启！',
                  type: 'success'
                });
              }
              that.mlog48 = false
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //获取手机号
      mobileshow: function() {
        var that = this
        axios.get('/api/plan-market/out-store/one?id=' + this.mobileid)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.mobile = response.data.data.mobile
              that.mlog = true
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //停止抓单
      stop: function(id) {
        var that = this
        axios.post('/api/plan-market/out-store/stop/fetch', {
            id: id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              that.$message.success('已停止抓单！');
              that.loading = true
              that.getlist()
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //点击登录和重复登录
      showlog: function(id) {
        this.id = id
        this.log = true
        var that = this
        axios.get('/api/plan-market/out-store/one?id=' + id)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.cookies = response.data.data.cookie
              that.time = [response.data.data.fetch_start_at, response.data.data.fetch_end_at]
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      showlog2: function(id) {
        this.id = id
        this.log2 = true
      },

      //设置手机号
      gomobile: function() {
        var that = this
        axios.post('/api/plan-market/out-store/update', {
            source: 'pdd',
            mobile: this.mobile
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              that.$message({
                message: '手机号设置成功',
                type: 'success'
              });
              that.mlog = false
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },

      //cookie登录
      gocookie: function() {
        this.cookies = this.cookies.trim()
        if (this.cookies == "") {
          this.$message('请填写cookie！');
          return false
        }
        // if(this.time == "" || this.time == undefined){
        //     this.$message('请选择抓单时间！');
        //     return false
        // }
        var that = this
        axios.post('/api/plan-market/out-store/update', {
            id: this.id,
            cookie: this.cookies
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              that.loading = true
              that.log = false
              that.getlist()
            } else {
              that.$message.error(response.data.msg.info);
            }
          })

      },
      gocookie2: function() {
        var that = this
        axios.post('/api/plan-market/out-store/update', {
            id: this.id,
            apply_cookie: this.cookies2,
            apply_anti: this.cookies3
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              that.loading = true
              that.log2 = false
              that.getlist()
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //获取号码
      getlist: function() {
        var that = this
        axios.get('/api/gth/out-store/list?source=pdd')
          .then(response => {
            if (response.data.msg.code == 0) {
              if (response.data.data != '') {
                for (var i in response.data.data) {
                  if (response.data.data[i].is_cookie === 0) {
                    response.data.data[i].stat = "不可用，请重新录入";
                  }
                  if (response.data.data[i].is_cookie === 1) {
                    response.data.data[i].stat = "可用";
                  }
                }
                that.list = response.data.data
                that.mobileid = response.data.data[0].id
                that.loading = false
              } else {
                that.loading = false
              }

            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.getlist()
      }
    },
  }
</script>

<style lang="scss" scoped>
  .order_catchpdd {
    .says48 {
      line-height: 25px;
      padding: 20px 0;
    }

    .team {
      background: #F9F9F9;

      .powertop {
        display: flex;
        width: 640px;
      }

      .powertopli {
        flex-basis: 160px;
        line-height: 45px;
        border-top: 4px #F9F9F9 solid;
        color: #727272;
        font-size: 14px;
        text-align: center;
      }

      .powertopact {
        background: #FFFFFF;
        border-top: 4px #DD2727 solid;
      }

      .centerall {
        padding: 20px;
        background: #FFFFFF;
        color: #666;

        .t-img {
          margin-bottom: 20px;
          position: relative;

          

          .t-email {
            position: absolute;
            background: #FFFFFF;
            color: #DD2727;
            font-size: 14px;
            right: 20px;
            padding: 5px 10px;
            top: 26px;
            cursor: pointer;
          }

          .t-48 {
            position: absolute;
            background: #FFFFFF;
            color: #DD2727;
            font-size: 14px;
            right: 160px;
            padding: 5px 10px;
            top: 26px;
            cursor: pointer;
          }
        }

        .t-con {
          .list {
            display: flex;
            text-align: center;
            color: #727272;
            line-height: 45px;
            border-top: 1px #EAEAEA solid;
            border-bottom: 1px #EAEAEA solid;
            margin-top: -1px;

            .th {
              flex: 1;
              background: #F9F9F9;
              font-size: 14px;
              border-right: 1px #EAEAEA solid;
            }

            .td {
              flex: 1;
              font-size: 14px;
              border-right: 1px #EAEAEA solid;
            }

            .td2 {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-wrap: wrap;
            }

            .el-button--danger {
              padding: 7px 15px !important;
            }
          }

          .el-pagination {
            text-align: right;
            margin: 20px 0
          }

          .addshop {
            text-align: center;
            padding: 20px 0;
          }
        }

        .getcookie {
          background: #F8F8F8;
          padding: 20px;
          line-height: 30px;
          margin-top: 40px;
          border: 1px #e6e6e6 solid;

          .getflex {
            display: flex;
            justify-content: space-between;
            width: 750px;
            margin: 0 auto;
            margin-top: 50px;

            .getxian {
              height: 25px;
              border-bottom: 1px #D5D5D5 solid;
              flex-basis: 280px;
            }

            .getflexli {
              flex-basis: 50px;
              text-align: center;
              z-index: 2;

              .getflexlix {
                background: #D5D5D5;
                line-height: 50px;
                border-radius: 25px;
                width: 50px;
              }
            }
          }

          .getflex2 {
            display: flex;
            justify-content: space-between;
            width: 950px;
            margin: 20px auto;

            .getflexli2 {
              width: 240px;
              text-align: center;

              .getflexli2title {
                font-size: 16px;
              }

              .getflexli2content {
                font-size: 14px;
              }
            }
          }

          .blue a {
            color: #409EFF;
            cursor: pointer
          }
        }
      }
    }

    .cookiechange {
      margin-left: 5px;
      cursor: pointer;
    }

  }
</style>
